<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>自助售货管理后台</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body>
<div class="content-wrapper">
  <div class="content-header ">
    <div class="content-header-left mb-2">
      <h3 class="content-header-title mb-0">员工管理</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        
        <div class="funcbtn clearfix">
          <div class="pull-left"><button  type="button" class="btn btn-primary"  onclick="showAddModal()">添加员工</button></div>
        </div>
        <!-- 添加搜索表单 -->
        <div class="search-box clearfix" style="margin-bottom: 20px;">
          <div class="col-md-3 pull-left">
            <input type="text" id="searchUsername" class="form-control" placeholder="请输入员工姓名">
          </div>
          <div class="col-md-3 pull-left">
            <input type="text" id="searchPhone" class="form-control" placeholder="请输入电话号码">
          </div>
          <div class="col-md-2 pull-left">
            <button type="button" class="btn btn-primary" onclick="searchEmployees()">搜索</button>
          </div>
        </div>
        <div class="tablebox1">
          <table class="table">
            <thead>
             <tr>
		                <th>ID</th>
		                <th>员工账号</th>
		                <th>员工姓名</th>
		                <th>电话</th>
		                <th>职务</th>
		                <th>邮箱</th>
		                <th>工资</th>
		                <th>创建时间</th>
		                <th>操作</th>
	                </tr>
            </thead>
            <tbody id="employeeTableBody">
            </tbody>
    </table>
    <div class="page clearfix">
						<div class="pull-left" id="pageTotal">共 400 条记录 第 1 / 80 页</div>
						<div class="pull-right">
							<nav aria-label="..." class="pull-left">
								  <ul class="pagination" id="pagination">
								 </ul>
							</nav>
							
							<div class="pull-left p-r-20  p-l-20"><select class="form-control"><option>5条每页</option></select></div>
							<div class="pull-left">跳至<input type="text" value="5" class="form-control">页</div>
						</div>
							
		</div>
			
		  </div>
      </div>
    </div>
			
  </div>
</div>
	
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">编辑人员信息</h4>
      </div>
      <div class="modal-body">
       <div class="form1 form2" >
				<ul class="row">
          <li class="col-xs-20" id="employeeIdli"><span>员工id:</span>
						<input type="text" class="form-control" value=" " id="employeeId" disabled>
					</li>
          </li>
					<li class="col-xs-20"><span>员工账号:</span>
						<input type="text" class="form-control" value=" " id="loginName">
					</li>
					
					<li class="col-xs-20"><span>员工姓名:</span>
						<input type="text" class="form-control" value=" " id="empName">
					</li>
					<li class="col-xs-20"><span>电话：</span>
						<input type="text" class="form-control" value=" " id="phone">
					</li>
					
					<li class="col-xs-20"><span>职务:</span>
						<input type="text" class="form-control" value=" " id="position">
					</li>
				  <li class="col-xs-20"><span>邮箱:</span>
						<input type="text" class="form-control" value=" " id="email">
					</li>
	        <li class="col-xs-20"><span>工资:</span>
						<input type="number" class="form-control" value=" " id="salary">
					</li>
				</ul>
			</div>
    </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="saveEmployee()">保存</button>
      </div>
    </div>
  </div>
</div>
	
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">修改业务人员密码</h4>
      </div>
      <div class="modal-body">
       <div class="form1 form2" >
				<ul class="row">
					<li class="col-xs-20"><span>业务人员手机：</span>
						<input type="text" class="form-control" value="1824567890" disabled>
					</li>
					
					<li class="col-xs-20"><span>业务人员密码：</span>
						<input type="text" class="form-control" value="test">
					</li>
					</ul>
				</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" >保存</button>
      </div>
    </div>
  </div>
</div>
	
	
	
<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script> 
<script src="date/js/pageUtil.js" type="text/javascript"></script>
<script>
  let employeeQuery ={
    pageNum: 1,
    pageSize: 5,
    username: "",
    phone: ""
  }
//页面加载完成
$(function(){
	getList(employeeQuery);
});

//获取员工列表
function getList(employeeQuery){ 
  $.ajax({
    type: "post",
    url: "http://127.0.0.1:25080/employees/pageList",
    data: employeeQuery,
    dataType: "json",
    success: function(data){
      console.log(data);
      // 这里应该更新表格内容，目前只是打印到控制台
      if(data.status){
        //清空表格
        $("#employeeTableBody").empty();
        data.data.list.forEach(function(item) { 
          let tr = `
            <tr>
              <td>${item.employeeId}</td>
              <td>${item.loginName}</td>
              <td>${item.empName}</td>
              <td>${item.phoneNumber}</td>
              <td>${item.position}</td>
              <td>${item.email}</td>
              <td>${item.salary}</td>
              <td>${item.createdAt}</td>
              <td>
                <div class="setbox">
                  <p>选择操作</p>
                  <div class="setlist"> 
                       <button class="btn btn-primary" onclick="showEditModal(${item.employeeId})">编辑</button>
                       <button class="btn btn-primary" onclick="showEditPwdModal(${item.employeeId})">重置密码</button>
                       <button class="btn btn-danger" onclick="deleteEmployee(${item.employeeId})">删除</button>
                  </div>
                </div>
              </td>
              </td>
            </tr>`;
            // 添加数据到表格中
            $("#employeeTableBody").append(tr);
        });
        // 添加分页功能
        $("#pageTotal").html("");
        let pageTotal =`共 ${data.data.total} 条记录 第 ${data.data.pageNum} / ${data.data.pages} 页`;
        $("#pageTotal").append(pageTotal);
        // 生成分页功能 调用pageUtil.js方法
        generatePagination(data.data.pageNum, data.data.pages);
      }   
    }
  });
}


// 切换页面
function changePage(pageNum) {
  employeeQuery.pageNum = pageNum;
  getList(employeeQuery);
}



// 搜索员工
function searchEmployees() {
  employeeQuery.username = $("#searchUsername").val().trim();
  employeeQuery.phone = $("#searchPhone").val().trim();
  getList(employeeQuery);
}

//点击新增按钮
function showAddModal() {
  $("#myModal").modal("show");
  // 清空表单数据
  clearFormData();
  // 隐藏员工id
  $("#employeeIdli").hide();
}


//点击修改按钮
function showEditModal(employeeId) {
  $("#myModal").modal("show");
  //z获取员工信息
  getEmployee(employeeId);


}

//点击保存按钮
function saveEmployee() {
  // 获取表单数据
  var employeeId = $("#employeeId").val().trim();
  var loginName = $("#loginName").val().trim();
  var empName = $("#empName").val().trim();
  var phoneNumber = $("#phone").val().trim();
  var position = $("#position").val().trim();
  var email = $("#email").val().trim();
  var salary = $("#salary").val().trim();
  let Employee = { employeeId, loginName, empName, phone, position, email, salary };
  $.ajax({
    type: "post",
    url: "http://127.0.0.1:25080/employees/edit",
    contentType: "application/json",
    data: JSON.stringify(Employee),
    dataType: "json",
    success: function(data) {
      console.log(data);
      if (data.status) {
        alert("保存成功");
        // 隐藏模态框
        $("#myModal").modal("hide");
        // 刷新列表
        getList(employeeQuery);
      }
    }
  })
}
//清空表单数据
function clearFormData() {
  $("#employeeId").val("");
  $("#loginName").val("");
  $("#empName").val("");
  $("#phone").val("");
  $("#position").val("");
  $("#email").val("");
  $("#salary").val("");
}

//点击重置密码按钮
function showEditPwdModal(employeeId) {
  $.ajax({
    type: "get",
    url: "/employee/getEmployee",
    data: {
      employeeId: employeeId
    },
    dataType: "json",
    success: function(result) {
      if (result.status) {
        //更新成功
        alert(result.message);
      } 
    }
  })
  
}
//获取员工信息
function getEmployee(employeeId) {
  $.ajax({
    type: "post",
    url: "http://127.0.0.1:25080/employees/getEmployee/" + employeeId,
    dataType: "json",
    success: function(data) {
      console.log(data);
      if (data.status) {
        // 显示员工信息
        $("#employeeId").val(data.data.employeeId);
        $("#loginName").val(data.data.loginName);
        $("#empName").val(data.data.empName);
        $("#phone").val(data.data.phoneNumber);
        $("#position").val(data.data.position);
        $("#email").val(data.data.email);
        $("#salary").val(data.data.salary);
        $("#employeeIdli").show();
      }
    }
  })
}


//点击删除按钮
function deleteEmployee(employeeId) {
  if (confirm("确定要删除吗？")) {
    
  }
}
</script>
</body>
</html>